<template>
  <view
    class="pop-dialog"
    v-if="showDialog"
    :style="{ top: topPosition + 'rpx', right: rightPosition + 'rpx' }"
  >
    <!-- 三角形  如果要定制的话，从这里找到css triangle进行修改 -->
    <div class="content">
      <view
        class="triangle"
        :style="{
          'margin-top': '-40rpx',
          'margin-right': '4rpx',
          'border-bottom-color': bgColor,
        }"
      />
      <view class="pop-body" :style="'background-color:' + bgColor + ';'">
        <view
          class="pop-item"
          :class="index !== menuList.length - 1 ? 'border-b' : ''"
          v-for="(item, index) in menuList"
          v-bind:key="index"
          @click="onClickPopMenu(item, index)"
        >
          <view class="uni_flex_row_align_left">
            <text
              class="uni_16px_400_colorfff"
              :style="
                index === current ? 'color:#F0B947' : 'color:' + textColor + ';'
              "
              >{{ item.name }}</text
            >
          </view>
        </view>
      </view>
    </div>
  </view>
</template>

<script>
export default {
  props: {
    current: {
      type: Number,
      default: 0,
    },
    textColor: {
      type: String,
      default: "#606266",
    },
    bgColor: {
      type: String,
      default: "#fff",
    },
    lineColor: {
      type: String,
      default: "#606266",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    top: {
      type: Number,
      default: 0,
    },
    left: {
      type: Number,
      default: 0,
    },
    right: {
      type: Number,
      default: 0,
    },
    triangleMarginRight: {
      type: Number,
      default: 24,
    },
  },
  data() {
    return {
      showDialog: false,
      menuList: [],
      topPosition: 0,
      rightPosition: 0,
      leftPosition: 0,
    };
  },
  watch: {
    isShow: {
      immediate: true,
      handler: async function (newVal, oldVal) {
        this.showDialog = newVal;
      },
    },
    list: {
      immediate: true,
      handler: async function (newVal, oldVal) {
        this.menuList = newVal;
      },
    },
    top: {
      immediate: true,
      handler: async function (newVal, oldVal) {
        this.topPosition = newVal;
      },
    },
    left: {
      immediate: true,
      handler: async function (newVal, oldVal) {
        this.leftPosition = newVal;
      },
    },
    right: {
      immediate: true,
      handler: async function (newVal, oldVal) {
        this.rightPosition = newVal;
      },
    },
  },
  methods: {
    onClickPopMenu(item, index) {
      this.$emit("onClickPopupItem", { ...item, ix: index });
    },
  },
};
</script>

<style lang="scss" scoped>
.pop-dialog {
  z-index: 999;
  position: absolute;
  top: 40;
  right: 20;
  font-size: 14px;
  border-radius: 4px;
  box-shadow: 0 0 15px #aaa;

  .content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    .triangle {
      width: 0;
      height: 0;
      border: 26rpx solid transparent;
      border-bottom-color: lightseagreen;
      position: absolute;
      top: 0;
      right: 0;
    }

    .pop-body {
      border-radius: 10px;
      padding: 12rpx;

      .pop-item {
        display: flex;
        flex-direction: column;
        padding: 12rpx;
      }

      .border-b {
        border-bottom: 1px #ccc solid;
      }
    }
  }
}
</style>
